<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="我的赠品" title-size="36" title-color="#333"></u-navbar>
        <u-tabs
          :list="tabList"
          :is-scroll="false"
          active-color="#10A28F"
          :current="current"
          @change="tabsChange"
        ></u-tabs>
        <u-gap height="20" bgColor="#F5F5F5"></u-gap>
      </view>
      <swiper class="swiperView" :current="scurrent" @animationfinish="animationfinish">
        <!-- TODO 后续通过循环重构改进，去掉冗余代码，提高可维护性 -->
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[0]"
            @query="queryList"
            :flex="true"
            :auto-show-back-to-top="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="mer-coupon" v-for="(group, index) in itemList[0]" :key="index">
              <view class="mer-info">
                <u-avatar :src="group.shop.logo" size="60"></u-avatar>
                <text class="mer-name">{{ group.shop.name }}</text>
              </view>
              <view class="couponListView" v-for="(item, index1) in group.items" :key="index1">
                <view class="couponView" v-if="item.giftActivity.type === 0" title="线下产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      v-if="item.giftActivity.picUrl"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                      border-radius="10rpx"
                    ></u-image>
                    <u-image
                      v-else
                      src="/static/gift.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view v-if="item.status === 1" class="couponBtn" @click="onProductReceive(item)"
                      >立即兑换
                    </view>
                    <view v-else-if="item.status === 2" class="couponBtn disabled">已领取</view>
                    <view v-else-if="item.status === 3" class="couponBtn disabled">已过期</view>
                  </view>
                </view>
                <view class="couponView" v-else-if="item.giftActivity.type === 1" title="线上产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      border-radius="10rpx"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view v-if="item.status === 1" class="couponBtn" @click="onProductReceive(item)"
                      >立即兑换
                    </view>
                    <view v-else-if="item.status === 2" class="couponBtn disabled">已领取</view>
                    <view v-else-if="item.status === 3" class="couponBtn disabled">已过期</view>
                  </view>
                </view>
                <view class="couponView" v-else-if="item.giftActivity.type === 2" title="优惠券">
                  <view class="moneyView moneyView-1">
                    <u-image
                      src="/static/coupon.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="lineView">
                    <view class="circle"></view>
                    <view class="line"></view>
                    <view class="circle2"></view>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                      <text>，最多抵扣{{ (item.originPrice * 0.01).toFixed(2) }}元 </text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view v-if="item.status === 1" class="couponBtn" @click="onCouponTake(item)"
                      >立即领取
                    </view>
                    <view v-else-if="item.status === 2" class="couponBtn disabled">已领取</view>
                    <view v-else-if="item.status === 3" class="couponBtn disabled">已过期</view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging1"
            v-model="itemList[1]"
            @query="queryList"
            :flex="true"
            :auto-show-back-to-top="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="mer-coupon" v-for="(group, index) in itemList[1]" :key="index">
              <view class="mer-info">
                <u-avatar :src="group.shop.logo" size="60"></u-avatar>
                <text class="mer-name">{{ group.shop.name }}</text>
              </view>
              <view class="couponListView" v-for="(item, index1) in group.items" :key="index1">
                <view class="couponView" v-if="item.giftActivity.type === 0" title="线下产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      v-if="item.giftActivity.picUrl"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                      border-radius="10rpx"
                    ></u-image>
                    <u-image
                      v-else
                      src="/static/gift.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn" @click="onProductReceive(item)">立即兑换</view>
                  </view>
                </view>
                <view class="couponView" v-else-if="item.giftActivity.type === 1" title="线上产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      border-radius="10rpx"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn" @click="onProductReceive(item)">立即兑换</view>
                  </view>
                </view>
                <view class="couponView" v-else-if="item.giftActivity.type === 2" title="优惠券">
                  <view class="moneyView moneyView-1">
                    <u-image
                      src="/static/coupon.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="lineView">
                    <view class="circle"></view>
                    <view class="line"></view>
                    <view class="circle2"></view>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                      <text>，最多抵扣{{ (item.originPrice * 0.01).toFixed(2) }}元 </text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view v-if="item.status === 1" class="couponBtn" @click="onCouponTake(item)"
                      >立即领取
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging2"
            v-model="itemList[2]"
            @query="queryList"
            :flex="true"
            :auto-show-back-to-top="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="mer-coupon" v-for="(group, index) in itemList[2]" :key="index">
              <view class="mer-info">
                <u-avatar :src="group.shop.logo" size="60"></u-avatar>
                <text class="mer-name">{{ group.shop.name }}</text>
              </view>
              <view class="couponListView" v-for="(item, index1) in group.items" :key="index1">
                <view class="couponView" v-if="item.giftActivity.type === 0" title="线下产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      v-if="item.giftActivity.picUrl"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                      border-radius="10rpx"
                    ></u-image>
                    <u-image
                      v-else
                      src="/static/gift.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已领取</view>
                  </view>
                </view>
                <view class="couponView" v-if="item.giftActivity.type === 1" title="线上产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      border-radius="10rpx"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已领取</view>
                  </view>
                </view>
                <view class="couponView" v-if="item.giftActivity.type === 2" title="优惠券">
                  <view class="moneyView moneyView-1">
                    <u-image
                      src="/static/coupon.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="lineView">
                    <view class="circle"></view>
                    <view class="line"></view>
                    <view class="circle2"></view>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                      <text>，最多抵扣{{ (item.originPrice * 0.01).toFixed(2) }}元 </text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已领取</view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging3"
            v-model="itemList[3]"
            @query="queryList"
            :flex="true"
            :auto-show-back-to-top="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="mer-coupon" v-for="(group, index) in itemList[3]" :key="index">
              <view class="mer-info">
                <u-avatar :src="group.shop.logo" size="60"></u-avatar>
                <text class="mer-name">{{ group.shop.name }}</text>
              </view>
              <view class="couponListView" v-for="(item, index1) in group.items" :key="index1">
                <view class="couponView" v-if="item.giftActivity.type === 0" title="线下产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      v-if="item.giftActivity.picUrl"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                      border-radius="10rpx"
                    ></u-image>
                    <u-image
                      v-else
                      src="/static/gift.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已过期</view>
                  </view>
                </view>
                <view class="couponView" v-if="item.giftActivity.type === 1" title="线上产品">
                  <view class="moneyView moneyView-1">
                    <u-image
                      border-radius="10rpx"
                      :src="item.giftActivity.picUrl"
                      width="140rpx"
                      height="140rpx"
                    ></u-image>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期：{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已过期</view>
                  </view>
                </view>
                <view class="couponView" v-if="item.giftActivity.type === 2" title="优惠券">
                  <view class="moneyView moneyView-1">
                    <u-image
                      src="/static/coupon.png"
                      width="140rpx"
                      height="140rpx"
                      mode="aspectFit"
                    ></u-image>
                  </view>
                  <view class="lineView">
                    <view class="circle"></view>
                    <view class="line"></view>
                    <view class="circle2"></view>
                  </view>
                  <view class="couponInfoView">
                    <view class="couponTitle">
                      <text>{{ item.giftActivity.name }}</text>
                      <text>，最多抵扣{{ (item.originPrice * 0.01).toFixed(2) }}元 </text>
                    </view>
                    <view class="InfoView">
                      <view class="couponTime">赠送日期：{{ formatTime(item.createTime) }}</view>
                      <view class="couponTime">失效日期{{ formatTime(item.expireTime) }}</view>
                    </view>
                    <view class="couponBtn disabled">已过期</view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabList: [
        {
          name: '全部',
          status: ''
        },
        {
          name: '待领取',
          status: '1'
        },
        {
          name: '已领取',
          status: '2'
        },
        {
          name: '已过期',
          status: '3'
        }
      ],
      itemList: [[], [], [], []],
      itemList2: []
    }
  },
  computed: {
    formatTime: function () {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onShow() {
    this.queryList(1)
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.queryList(1)
    },
    onCouponTake(item) {
      this.$u
        .post('/app-api/promotion/gift/record/take', {
          id: item.id
        })
        .then((res) => {
          if (res.code === 0) {
            this.$u.toast('领取成功')
            setTimeout(function () {
              uni.reLaunch({
                url: '/pages/ucenter/ucenter'
              })
            }, 1000)
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    onProductReceive(item) {
      this.$u.route(
        'goods/order-confirm/gift-order-confirm?item=' +
          JSON.stringify({
            id: item.id,
            type: item.giftActivity.type,
            picUrl: item.giftActivity.picUrl,
            name: item.giftActivity.name,
            price: item.originPrice
          })
      )
    },
    queryList(page = 1, pageSize = 10) {
      this.$u
        .get('/app-api/promotion/gift/record/page-group', {
          pageNo: page,
          pageSize,
          status: this.tabList[this.scurrent].status
        })
        .then((res) => {
          let dynPangin = this.scurrent == 0 ? 'paging' : 'paging' + this.scurrent
          this.$refs[dynPangin].complete(res.data.list)
        })
    }
  }
}
</script>

<style lang="scss">
@import url('my-coupon.css');

page {
  background: #f5f5f5;
}

.couponListView {
  // padding: 30rpx 20rpx;
  // background-color: #fff;

  .couponView {
    display: flex;
    height: 161rpx;
    margin-top: 19rpx;

    .moneyView {
      background-color: #10a28f;
      width: 160rpx;
      color: #ffffff;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;

      .couponMoney {
        font-size: 36rpx;
        margin-bottom: 10rpx;

        text {
          font-size: 56rpx;
          font-weight: 600;
        }
      }

      .couponTips {
        font-size: 24rpx;
      }
    }

    .moneyView-1 {
      background: #f5f5f5;
    }

    .couponInfoView {
      flex: 1;
      background: #f5f5f5;
      border-radius: 8rpx;
      border: 1px solid #f5f5f5;
      margin-left: -15rpx;
      padding: 20rpx;
      position: relative;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .InfoView {
        display: flex;
        flex-flow: column;

        .couponTitle {
          font-size: 30rpx;
          color: #333333;
        }

        .couponLabel {
          font-size: 20rpx;
          color: #fa453c;
          border-radius: 20rpx;
          border: 1px solid #fa453c;
          padding: 2rpx 0;
          width: 109rpx;
          text-align: center;
          // height: 40rpx;
          // line-height: 40rpx;
        }

        .couponTime {
          font-size: 20rpx;
          color: #999999;
        }
      }

      .couponBtn {
        width: 150rpx;
        height: 50rpx;
        background: #10a28f;
        border-radius: 25rpx;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 48rpx;
        text-align: center;
        padding: 0 15rpx;
        position: absolute;
        top: 55rpx;
        right: 20rpx;
      }

      .disabled {
        background: #cccccc;
      }
    }

    .lineView {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      margin-left: -15rpx;
      height: 161rpx;
      position: relative;

      .circle {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: #fff;
        margin-top: -15rpx;
        border: 1px solid #e6e6e6;
        z-index: 9;
      }

      .circle2 {
        z-index: 9;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: #fff;
        margin-bottom: -15rpx;
        border: 1px solid #e6e6e6;
      }

      .line {
        flex: 1;
        width: 1rpx;
        /* 设置元素的宽度 */
        background-color: #e6e6e6;
        /* 左边虚线 */
      }
    }
  }

  .couponNotCan {
    .moneyView {
      background-color: #cccccc;
    }
  }
}
</style>
